<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container"></div>
      <table class="tab">
        <tr>
          <th>图片标题</th>
          <th>跳转链接</th>
          <th>图片地址</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in picslist" :key="index">
          <td>{{ item.title }}</td>
          <td>{{ item.link }}</td>
          <td>{{ item.image }}</td>
          <td>
            <Button color="green" @click="upd(item.id)">修改</Button
            >&nbsp;&nbsp;&nbsp;&nbsp;<Button color="red" @click="del(item.id)"
              >删除</Button
            >
          </td>
        </tr>
      </table>

      <br /><br />
      <center>
        <a href="/insertpics"><Button color="blue">添加</Button></a>
      </center>
    </section>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";

export default {
  data() {
    return {
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "幻灯片列表" }
      ],
      picslist: []
    };
  },
  mounted: function() {
    this.axios({
      url: "http://localhost:8000/showpics/"
    }).then(res => {
      if (res.data.code == 405) {
        this.$Message(res.data.msg);
      } else {
        this.picslist = res.data;
      }
    });
  },
  methods: {
    upd: function(pid) {
      this.$router.push({ path: "/update_pics", query: { pid: pid } });
    },
    del: function(pid) {
      this.axios({
        url: "http://localhost:8000/showpics/",
        method: "DELETE",
        data: {
          pid: pid
        }
      }).then(res => {
        this.$Message(res.data.msg);
        location.reload();
      });
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter
  }
};
</script>
 
<style>
.tab {
  text-align: center;
  width: 1200px;
  margin: auto;
  border: 1px solid #000;
}
.tab th {
  border: 1px solid #000;
  width: 400px;
  height: 30px;
}
.tab td {
  border: 1px solid #000;
  height: 50px;
}
</style>